<style lang="less">
@import './settingManage.less';
</style>
<style scoped lang="less">
.wrapper01 {
    padding: 8px 40px;
    min-height: 550px;
    background: #fff
}
.cw380 {
    width: 380px
}
.cw100 {
    width: 100px;
}

.cml10 {
    margin-left: 10px;
}

.cml5 {
    margin-left: 5px
}
</style>
<template>
    <div>
        <Card>
            <Layout>
                <Sider hide-trigger style="background: #fff; max-width: 420px;flex:unset" :style="{'width': siderWidth}">
                    <Menu :active-name="currName" theme="light" width="auto" @on-select="currName = $event">
<!--                        <MenuItem name="oss">文件对象存储配置</MenuItem>-->
                        <MenuItem name="sms">短信配置</MenuItem>
                        <MenuItem name="email">邮件配置</MenuItem>
                        <MenuItem name="vaptcha">Vaptcha验证码</MenuItem>
<!--                        <MenuItem name="stopWord">禁用词管理</MenuItem>-->
<!--                        <MenuItem name="notice">系统公告配置</MenuItem>-->
                        <MenuItem name="other">其他配置</MenuItem>
                    </Menu>
                </Sider>
                <Content class="wrapper01" >
                    <div v-show="currName == 'oss'">
                        <div class="setting-title">文件对象存储配置</div>
                        <oss />
                    </div>
                    <div v-show="currName == 'sms'">
                        <div class="setting-title">短信配置</div>
                        <sms />
                    </div>
                    <div v-show="currName == 'email'">
                        <div class="setting-title">邮箱配置</div>
                        <div style="display: flex; position: relative">
                            <Form ref="emailForm" :model="email" :label-width="labelWidth110" label-position="left" :rules="emailValidate">
                                <FormItem label="邮箱服务器" prop="host">
                                    <Input type="text" v-model="email.host" placeholder="请输入邮箱服务器Host，例如QQ邮箱为smtp.qq.com" class="cw380"  />
                                </FormItem>
                                <FormItem label="发送邮箱账号" prop="username">
                                    <Input type="text" v-model="email.username" placeholder="请输入发送者Email账号" class="cw380" />
                                </FormItem>
                                <FormItem label="邮箱授权码" prop="password">
                                    <Tooltip placement="right" content="无法编辑时请先点击查看图标">
                                        <Input
                                            class="input-see cw380"
                                            type="text"
                                            v-model="email.password"
                                            :readonly="!changedEmailPass"
                                            @on-click="seeSecret('EMAIL_SETTING')"
                                            icon="ios-eye"
                                            placeholder="请输入邮箱授权码，进入邮箱-设置中可找到"
                                        />
                                    </Tooltip>
                                </FormItem>
                                <FormItem>
                                    <Button type="primary" class="cw100"  :loading="saveLoading" @click="saveEditEmail">保存更改</Button>
                                </FormItem>
                            </Form>
                            <Spin fix v-if="loading"></Spin>
                        </div>
                    </div>
                    <div v-show="currName == 'vaptcha'">
                        <div class="setting-title">Vaptcha验证码配置</div>
                        <div style="display: flex; position: relative">
                            <Form ref="vaptchaForm" :model="vaptcha" :label-width="labelWidth110" label-position="left" :rules="vaptchaValidate">
                                <FormItem label="VID" prop="vid">
                                    <Input type="text" v-model="vaptcha.vid" placeholder="请输入验证单元VID" cw380 />
                                </FormItem>
                                <FormItem label="secretKey" prop="secretKey">
                                    <Tooltip placement="right" content="无法编辑时请先点击查看图标">
                                        <Input
                                            class="input-see cw380"
                                            type="text"
                                            v-model="vaptcha.secretKey"
                                            :readonly="!changedVaptchaSK"
                                            @on-click="seeSecret('VAPTCHA_SETTING')"
                                            icon="ios-eye"
                                            placeholder="请输入验证单元Key"
                                        />
                                    </Tooltip>
                                </FormItem>
                                <FormItem>
                                    <Button type="primary" class="cw100" :loading="saveLoading" @click="saveEditVaptcha">保存更改</Button>
                                </FormItem>
                            </Form>
                            <Spin fix v-if="loading"></Spin>
                        </div>
                    </div>
                    <div v-show="currName == 'stopWord'">
                        <div class="setting-title">禁用词管理</div>
                        <stop-word class="wh-100" />
                    </div>
                    <div v-show="currName == 'notice'">
                        <div class="setting-title">
                            系统公告配置
                            <Tooltip content="访问系统公告，右上角弹出" placement="right">
                                <Icon type="md-help-circle" size="20" color="#c5c5c5" 
                                class="cml10" style=" cursor: pointer" />
                            </Tooltip>
                        </div>
                        <div style="display: flex">
                            <Form ref="noticeForm" :model="notice" :label-width="labelWidth110" label-position="left">
                                <FormItem label="公告开关" prop="open">
                                    <i-switch v-model="notice.open">
                                        <span slot="open">开</span>
                                        <span slot="close">关</span>
                                    </i-switch>
                                </FormItem>
                                <FormItem label="展示时长" prop="duration">
                                    <Tooltip trigger="hover" placement="right" content="设为0不自动关闭">
                                        <InputNumber :max="1000" :min="0" v-model="notice.duration"></InputNumber>
                                        <span class="cml5">秒</span>
                                    </Tooltip>
                                </FormItem>
                                <FormItem label="展示页面" prop="position">
                                    <Select v-model="notice.position" placeholder="请选择" class="cw380">
                                        <Option value="LOGIN">登录页（访问系统时）</Option>
                                        <Option value="HOME">首页（登录系统后）</Option>
                                    </Select>
                                </FormItem>
                                <FormItem label="公告标题" prop="title">
                                    <Input v-model="notice.title" class="cw380" />
                                </FormItem>
                                <FormItem label="公告内容" prop="content">
                                    <Input type="textarea" v-model="notice.content" :rows="4" placeholder class="cw380" />
                                </FormItem>
                                <FormItem>
                                    <Button type="primary" class="cw100"  :loading="saveLoading" @click="saveEditNotice">保存更改</Button>
                                </FormItem>
                            </Form>
                            <Spin fix v-if="loading"></Spin>
                        </div>
                    </div>
                    <div v-show="currName == 'other'">
                        <div class="setting-title">其他配置</div>
                        <div style="display: flex">
                            <Form ref="otherForm" :model="other" :label-width="labelWidth110" label-position="left" :rules="otherValidate">
                                <FormItem label="应用部署域名" prop="domain">
                                    <Tooltip placement="right" content="拼接部分资源访问链接使用">
                                        <Input type="text" v-model="other.domain" placeholder="请输入应用部署域名前缀，如http://xboot.exrick.cn" class="cw380" />
                                    </Tooltip>
                                </FormItem>
                                <FormItem label="单点登录域名" prop="ssoDomain">
                                    <Tooltip max-width="250" transfer placement="right" content="该域名及子域名下将可获得单点登录所需数据">
                                        <Input type="text" v-model="other.ssoDomain" placeholder="请输入应用部署一级域名，如exrick.cn" class="cw380" />
                                    </Tooltip>
                                </FormItem>
                                <FormItem label="IP黑名单" prop="blacklist">
                                    <Input type="textarea" v-model="other.blacklist" :rows="4" placeholder="多个以回车分隔" class="cw380" />
                                </FormItem>
                                <FormItem>
                                    <Button type="primary" class="cw100" :loading="saveLoading" @click="saveEditOther">保存更改</Button>
                                </FormItem>
                            </Form>
                            <Spin fix v-if="loading"></Spin>
                        </div>
                    </div>
                </Content>
            </Layout>
        </Card>
    </div>
</template>

<script>
import { seeSecretSet, getEmailSet, editEmailSet, getVaptchaSet, editVaptchaSet, getOtherSet, editOtherSet, getNoticeSet, editNoticeSet } from '@/api/index';
import oss from './oss.vue';
import sms from './sms.vue';
import stopWord from './stopWord.vue';
export default {
    name: 'setting-manage',
    components: {
        oss,
        sms,
        stopWord
    },
    data() {
        return {
            labelWidth110: 110,
            siderWidth: 220,
            currName: 'oss',
            loading: false, // 表单加载状态
            saveLoading: false,
            email: {
                host: '',
                username: '',
                password: ''
            },
            changedEmailPass: false, // 是否修改邮件密码
            vaptcha: {
                vID: '',
                secretKey: ''
            },
            changedVaptchaSK: false, // 是否修改Vaptcha的secrectKey
            notice: {
                duration: 10
            },
            other: {
                domain: 'http://127.0.0.1:8888',
                ssoDomain: '',
                blacklist: ''
            },
            emailValidate: {
                // 表单验证规则
                host: [{ required: true, message: '不能为空', trigger: 'change' }],
                username: [{ required: true, message: '不能为空', trigger: 'change' }],
                password: [{ required: true, message: '不能为空', trigger: 'change' }]
            },
            vaptchaValidate: {
                // 表单验证规则
                vid: [{ required: true, message: '不能为空', trigger: 'change' }],
                secretKey: [{ required: true, message: '不能为空', trigger: 'change' }]
            },
            otherValidate: {
                // 表单验证规则
                domain: [{ required: true, message: '不能为空', trigger: 'change' }]
            }
        };
    },
    methods: {
        init() {
            this.initEmailSet();
            this.initVaptchaSet();
            // this.initNoticeSet();
            this.initOtherSet();
        },
        initEmailSet() {
            this.loading = true;
            getEmailSet().then(res => {
                this.loading = false;
                if (res.result) {
                    // 转换null为""
                    for (let attr in res.result) {
                        if (res.result[attr] == null) {
                            res.result[attr] = '';
                        }
                    }
                    this.email = res.result;
                } else {
                    this.changedEmailPass = true;
                }
            });
        },
        initVaptchaSet() {
            this.loading = true;
            getVaptchaSet().then(res => {
                this.loading = false;
                if (res.result) {
                    // 转换null为""
                    for (let attr in res.result) {
                        if (res.result[attr] == null) {
                            res.result[attr] = '';
                        }
                    }
                    this.vaptcha = res.result;
                } else {
                    this.changedVaptchaSK = true;
                }
            });
        },
        initOtherSet() {
            this.loading = true;
            getOtherSet().then(res => {
                this.loading = false;
                if (res.result) {
                    // 转换null为""
                    for (let attr in res.result) {
                        if (res.result[attr] == null) {
                            res.result[attr] = '';
                        }
                    }
                    this.other = res.result;
                }
            });
        },
        initNoticeSet() {
            this.loading = true;
            getNoticeSet().then(res => {
                this.loading = false;
                if (res.result) {
                    // 转换null为""
                    for (let attr in res.result) {
                        if (res.result[attr] == null) {
                            res.result[attr] = '';
                        }
                    }
                    this.notice = res.result;
                }
            });
        },
        seeSecret(name) {
            if (!name) {
                return;
            }
            seeSecretSet(name).then(res => {
                if (res.success) {
                    if (this.currName == 'sms') {
                        this.sms.secretKey = res.result;
                        this.changedSmsSK = true;
                    } else if (this.currName == 'email') {
                        this.email.password = res.result;
                        this.changedEmailPass = true;
                    } else if (this.currName == 'vaptcha') {
                        this.vaptcha.secretKey = res.result;
                        this.changedVaptchaSK = true;
                    }
                }
            });
        },
        saveEditEmail() {
            this.$refs.emailForm.validate(valid => {
                if (valid) {
                    this.saveLoading = true;
                    this.email.changed = this.changedEmailPass;
                    editEmailSet(this.email).then(res => {
                        this.saveLoading = false;
                        if (res.success) {
                            this.$Message.success('保存成功');
                        }
                    });
                }
            });
        },
        saveEditVaptcha() {
            this.$refs.vaptchaForm.validate(valid => {
                if (valid) {
                    this.saveLoading = true;
                    this.vaptcha.changed = this.changedVaptchaSK;
                    editVaptchaSet(this.vaptcha).then(res => {
                        this.saveLoading = false;
                        if (res.success) {
                            this.$Message.success('保存成功');
                        }
                    });
                }
            });
        },
        saveEditOther() {
            this.$refs.otherForm.validate(valid => {
                if (valid) {
                    this.saveLoading = true;
                    editOtherSet(this.other).then(res => {
                        this.saveLoading = false;
                        if (res.success) {
                            this.$Message.success('保存成功');
                        }
                    });
                }
            });
        },
        saveEditNotice() {
            this.saveLoading = true;
            let str = JSON.stringify(this.notice);
            let params = JSON.parse(str);
            if (!this.notice.duration) {
                params.duration = 0;
            }
            editNoticeSet(params).then(res => {
                this.saveLoading = false;
                if (res.success) {
                    this.$Message.success('保存成功');
                }
            });
        },
        onRestWindow() {
            // this.columns = this.restTableCellWidth(this.columns_1)
            this.labelWidth110 = this.searchLabelWidth(this.labelWidth110)
            this.siderWidth = this.searchLabelWidth(this.siderWidth)
        }
    },
    mounted() {
        this.onRestWindow()
        window.addEventListener('resize',this.onRestWindow)
        let name = this.$route.query.name;
        if (name) {
            this.currName = name;
        }
        this.init();
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.onRestWindow)
    }
};
</script>
